It looks like you have declared the protect function multiple times in your authMiddleware.js file. Here’s how you can fix it:

Steps to Fix:

1. Check for Duplicate Declarations:

   • Open middlewares/authMiddleware.js
   • Search for multiple const protect = statements.

2. Remove or Rename the Duplicate:

   • If you see multiple declarations of protect, remove one of them.
   • If needed, rename one of them to something else.

3. Check for Re-Imports:

   • If authMiddleware.js is being imported in multiple places, ensure that it is not being imported twice in authRoutes.js.

4. Restart Node.js Server:

   • Run node app.js again to see if the issue is resolved.

Example Fix in authMiddleware.js:

js
CopyEdit
const protect = async (req, res, next) => {
  // Middleware logic here
};

module.exports = { protect }; // Ensure it's exported only once

Let me know if the issue persists! 🚀

I see the issue! You have two separate protect function declarations—one inside authMiddleware.js and another inside authRoutes.js.

How to Fix It

Remove the second declaration of protect inside authRoutes.js.

Steps:

1. Open authRoutes.js.

2. Delete the extra protect function at the bottom of the file.

3. Keep only the protect import at the top:

   js
   CopyEdit
   const { protect } = require("../middlewares/authMiddleware"); // ✅ Correct import
   

4. Ensure authMiddleware.js exports protect only once like this:

   js
   CopyEdit
   const protect = async (req, res, next) => {
       try {
           const token = req.headers.authorization?.split(" ")[1];
   
           if (!token) {
               return res.status(401).json({ message: "No token, authorization denied" });
           }
   
           let decoded;
           try {
               decoded = jwt.verify(token, process.env.JWT_SECRET);
           } catch (err) {
               if (err.name === "TokenExpiredError") {
                   return res.status(401).json({ message: "Session expired. Please log in again." });
               }
               return res.status(401).json({ message: "Invalid token." });
           }
   
           req.user = await User.findById(decoded.id).select("-password");
           if (!req.user) {
               return res.status(401).json({ message: "User not found" });
           }
   
           next();
       } catch (error) {
           console.error("🚨 Auth Middleware Error:", error);
           res.status(401).json({ message: "Authorization error" });
       }
   };
   
   module.exports = { protect }; // ✅ Exporting it properly
   

5. Restart your Node.js server to apply the changes:

   sh
   CopyEdit
   ctrl + c  # Stop the server
   node app.js  # Restart the server
   

This should fix the "Identifier 'protect' has already been declared" error. Let me know if you need further assistance! 🚀

🔍 Issue: "Cannot find module '../middlewares/auth'"

The error indicates that your friendRoutes.js file is trying to import a file called auth.js from the middlewares folder, but that file does not exist.

✅ How to Fix It

1. Check the Import Path in friendRoutes.js

• Open D:\filmmaker-community\routes\friendRoutes.js
• Look for this incorrect import:

  js
  CopyEdit
  const { protect } = require("../middlewares/auth"); // ❌ Wrong file name
  

• Change it to:

  js
  CopyEdit
  const { protect } = require("../middlewares/authMiddleware"); // ✅ Correct file name
  

2. Verify authMiddleware.js Exists

• Open D:\filmmaker-community\middlewares\
• Make sure there is a file named authMiddleware.js inside this folder.

3. Restart Your Server

After making these changes, restart the Node.js server:

sh
CopyEdit
ctrl + c  # Stop the server
node app.js  # Restart the server

🎯 Why Did This Happen?

• The import statement was referring to ../middlewares/auth, but your actual file is named authMiddleware.js.
• Node.js is case-sensitive, so the incorrect filename causes a MODULE_NOT_FOUND error.

This fix should resolve the issue! 🚀 Let me know if you need more help.

🚨 Issue in friendRoutes.js

Your authMiddleware import is incorrect:

js
CopyEdit
const authMiddleware = require("../middlewares/auth"); // ❌ Incorrect

It should be:

js
CopyEdit
const { protect } = require("../middlewares/authMiddleware"); // ✅ Correct

✅ Fixed friendRoutes.js

Update your code like this:

js
CopyEdit
const express = require("express");
const router = express.Router();
const { protect } = require("../middlewares/authMiddleware"); // ✅ Correct import
const User = require("../models/User");

// Send a friend request
router.post("/send-friend-request", protect, async (req, res) => { // ✅ Use `protect`
    try {
        const { recipientId } = req.body;
        const senderId = req.user.id; // Extracted from authentication middleware

        if (!recipientId) {
            return res.status(400).json({ message: "Recipient ID is required." });
        }

        // Ensure recipient exists
        const recipient = await User.findById(recipientId);
        if (!recipient) {
            return res.status(404).json({ message: "User not found." });
        }

        // Check if already friends
        if (recipient.friends.includes(senderId)) {
            return res.status(400).json({ message: "You are already friends with this user." });
        }

        // Add friend request
        recipient.friendRequests.push(senderId);
        await recipient.save();

        res.json({ message: "Friend request sent successfully!" });
    } catch (error) {
        console.error("❌ Server Error:", error);
        res.status(500).json({ message: "Internal server error." });
    }
});

module.exports = router; // ✅ Ensure it's exported correctly

🔥 Why Did This Happen?

• Your middleware file is named authMiddleware.js, but you were importing it as auth.
• Since auth.js doesn’t exist, Node.js threw a MODULE_NOT_FOUND error.

🔄 Final Steps

1. Save the changes.
2. Restart your Node.js server:

   sh
   CopyEdit
   ctrl + c  # Stop the server
   node app.js  # Restart the server
   

3. Test the API again!

This should fix the issue! 🚀 Let me know if you need more help.

🔍 Understanding the Errors

1. 401 (Unauthorized)

• This means the request to http://localhost:5000/api/friends/send-friend-request is failing because the user is not authenticated.
• The server expects a valid JWT token in the request headers, but it's either:
  • Missing
  • Invalid
  • Expired

2. Invalid token (From Server Response)

• Your backend (authMiddleware.js) is rejecting the token.
• Possible reasons:
  1. No token is sent in the request.
  2. The token is incorrect (e.g., modified, expired, or from a different user).
  3. Backend is not properly verifying the token (maybe a wrong secret key).

🔧 How to Fix It

✅ Step 1: Make Sure the Frontend Sends the Token

Check your sendFriendRequest function in community.html and ensure it sends the token in the request headers.

🔹 Fix for community.html

Find the function that sends the request (sendFriendRequest), and update it to include the Authorization header:

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token"); // ✅ Get the token from local storage

    if (!token) {
        console.error("❌ No token found! User must be logged in.");
        alert("You must be logged in to add friends.");
        return;
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}` // ✅ Send the token
            },
            body: JSON.stringify({ recipientId })
        });

        const data = await response.json();

        if (!response.ok) {
            throw new Error(`Server Error: ${JSON.stringify(data)}`);
        }

        console.log("✅ Friend request sent:", data.message);
        alert("Friend request sent successfully!");
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert(error.message);
    }
}

✅ Step 2: Debug Backend Token Verification

Check your authMiddleware.js to ensure the token is being read correctly.

🔹 Fix for authMiddleware.js

Make sure it properly extracts the token:

js
CopyEdit
const jwt = require("jsonwebtoken");
const User = require("../models/User");

const protect = async (req, res, next) => {
    try {
        const token = req.headers.authorization?.split(" ")[1]; // ✅ Extract token

        if (!token) {
            return res.status(401).json({ message: "No token, authorization denied" });
        }

        let decoded;
        try {
            decoded = jwt.verify(token, process.env.JWT_SECRET); // ✅ Verify token
        } catch (err) {
            return res.status(401).json({ message: "Invalid token." });
        }

        req.user = await User.findById(decoded.id).select("-password");
        if (!req.user) {
            return res.status(401).json({ message: "User not found" });
        }

        next();
    } catch (error) {
        console.error("🚨 Auth Middleware Error:", error);
        res.status(401).json({ message: "Authorization error" });
    }
};

module.exports = { protect };

✅ Step 3: Ensure the User is Logged In

• Before making the API request, check if the user is logged in.
• When the user logs in, store the token in localStorage:

js
CopyEdit
localStorage.setItem("token", userToken); // Save token after login

✅ Final Steps

1. Fix sendFriendRequest function in community.html to include the token.
2. Ensure authMiddleware.js correctly verifies the token.
3. Restart your Node.js server:

   sh
   CopyEdit
   ctrl + c  # Stop the server
   node app.js  # Restart the server
   

4. Refresh the browser and try again.

This should fix the "Unauthorized" and "Invalid token" errors! 🚀 Let me know if you need more help.

🚨 Issues in Your Code

1. protect is defined twice:

   • First in authMiddleware.js (which is correct ✅).
   • Again inside friendRoutes.js (which is incorrect ❌).

2. authMiddleware.js is being redefined inside friendRoutes.js, which leads to duplicate declaration errors.

✅ How to Fix It

Step 1: Remove Duplicate protect Middleware in friendRoutes.js

In your friendRoutes.js, remove the extra protect function. Keep only this import:

js
CopyEdit
const { protect } = require("../middlewares/authMiddleware"); // ✅ Correct import

Your friendRoutes.js should look like this:

js
CopyEdit
const express = require("express");
const router = express.Router();
const { protect } = require("../middlewares/authMiddleware"); // ✅ Correct import
const User = require("../models/User");

// Send Friend Request Route
router.post("/send-friend-request", protect, async (req, res) => {
    try {
        const { recipientId } = req.body;
        const senderId = req.user.id; // ✅ `protect` middleware ensures `req.user` exists

        if (!recipientId) {
            return res.status(400).json({ message: "Recipient ID is required." });
        }

        // Ensure recipient exists
        const recipient = await User.findById(recipientId);
        if (!recipient) {
            return res.status(404).json({ message: "User not found." });
        }

        // Check if already friends
        if (recipient.friends.includes(senderId)) {
            return res.status(400).json({ message: "You are already friends with this user." });
        }

        // Add friend request
        recipient.friendRequests.push(senderId);
        await recipient.save();

        res.json({ message: "Friend request sent successfully!" });
    } catch (error) {
        console.error("❌ Server Error:", error);
        res.status(500).json({ message: "Internal server error." });
    }
});

module.exports = router; // ✅ Ensure it's correctly exported

Step 2: Keep protect Middleware Inside authMiddleware.js

Your authMiddleware.js should look like this:

js
CopyEdit
const jwt = require("jsonwebtoken");
const User = require("../models/User");

const protect = async (req, res, next) => {
    try {
        const token = req.headers.authorization?.split(" ")[1];

        if (!token) {
            return res.status(401).json({ message: "No token, authorization denied" });
        }

        let decoded;
        try {
            decoded = jwt.verify(token, process.env.JWT_SECRET);
        } catch (err) {
            if (err.name === "TokenExpiredError") {
                return res.status(401).json({ message: "Session expired. Please log in again." });
            }
            return res.status(401).json({ message: "Invalid token." });
        }

        req.user = await User.findById(decoded.id).select("-password");
        if (!req.user) {
            return res.status(401).json({ message: "User not found" });
        }

        next();
    } catch (error) {
        console.error("🚨 Auth Middleware Error:", error);
        res.status(401).json({ message: "Authorization error" });
    }
};

module.exports = { protect }; // ✅ Export it properly

Step 3: Restart Your Server

After making these changes, restart your Node.js server:

sh
CopyEdit
ctrl + c  # Stop the server
node app.js  # Restart the server

This should fix the "Identifier 'protect' has already been declared" error and "Invalid token" issues! 🚀 Let me know if you need more help.

Here is the fully updated authMiddleware.js with all fixes applied:

✅ Updated authMiddleware.js

js
CopyEdit
const jwt = require("jsonwebtoken");
const User = require("../models/User");

const protect = async (req, res, next) => {
    try {
        // Extract token from Authorization header
        const token = req.headers.authorization?.split(" ")[1];

        if (!token) {
            return res.status(401).json({ message: "No token, authorization denied" });
        }

        let decoded;
        try {
            decoded = jwt.verify(token, process.env.JWT_SECRET);
        } catch (err) {
            if (err.name === "TokenExpiredError") {
                return res.status(401).json({ message: "Session expired. Please log in again." });
            }
            return res.status(401).json({ message: "Invalid token." });
        }

        // Find the user and attach it to `req.user`
        req.user = await User.findById(decoded.id).select("-password");
        if (!req.user) {
            return res.status(401).json({ message: "User not found" });
        }

        next();
    } catch (error) {
        console.error("🚨 Auth Middleware Error:", error);
        res.status(401).json({ message: "Authorization error" });
    }
};

module.exports = { protect }; // ✅ Ensure it's correctly exported

🔥 What’s Fixed?

✅ Removes any duplicate declarations
✅ Properly extracts and verifies the JWT token
✅ Handles token expiration and invalid cases correctly
✅ Ensures the authenticated user exists before proceeding
✅ Attaches the authenticated user to req.user for other routes to use

Next Steps

1. Replace your existing authMiddleware.js file with this version.
2. Restart your server:

   sh
   CopyEdit
   ctrl + c  # Stop the server
   node app.js  # Restart the server
   

3. Test the API by sending a friend request, making sure a valid JWT token is included in the request headers.

Let me know if you need further assistance! 🚀

🚨 Issue: "Invalid Token" (401 Unauthorized)

The error means that the JWT token is either missing, expired, or invalid when making the POST request to /api/friends/send-friend-request.

✅ How to Fix It

1️⃣ Check How the Token is Sent in the Request

Ensure that your frontend (community.html or JS file) correctly sends the token in the Authorization header.

🔹 Your frontend (JavaScript) should look like this:

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token"); // Retrieve token from localStorage

    if (!token) {
        console.error("❌ No token found. Please log in.");
        alert("You must be logged in to send friend requests.");
        return;
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}` // ✅ Ensure token is sent correctly
            },
            body: JSON.stringify({ recipientId }),
        });

        const data = await response.json();
        if (!response.ok) {
            throw new Error(`Server Error: ${JSON.stringify(data)}`);
        }

        alert("✅ Friend request sent successfully!");
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert("Failed to send friend request.");
    }
}

2️⃣ Verify the Token in Local Storage

Before making the request, check if the token is stored in localStorage.
Open Developer Console (F12 → Console tab) and type:

js
CopyEdit
console.log(localStorage.getItem("token"));

🔹 If you see null or undefined, that means:

• The user is not logged in.
• The token is not being saved properly after login.

🔹 If a token is returned but still gives an "Invalid token" error:

• The token might be expired or incorrectly signed.

3️⃣ Verify the Token on the Backend

Use Postman or cURL to manually test the API.

Example using cURL (replace your_token_here with an actual token):

sh
CopyEdit
curl -X POST http://localhost:5000/api/friends/send-friend-request \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer your_token_here" \
     -d '{"recipientId": "123456789"}'

✅ If this works, the problem is in your frontend.
❌ If this fails, the issue is with the backend token validation.

4️⃣ Debug Backend Token Verification

Go to your authMiddleware.js and modify this part to log the received token:

js
CopyEdit
const protect = async (req, res, next) => {
    try {
        const token = req.headers.authorization?.split(" ")[1];

        console.log("🔍 Received Token:", token); // ✅ Debugging log

        if (!token) {
            return res.status(401).json({ message: "No token, authorization denied" });
        }

        let decoded;
        try {
            decoded = jwt.verify(token, process.env.JWT_SECRET);
        } catch (err) {
            console.error("🚨 JWT Error:", err.message);
            return res.status(401).json({ message: "Invalid token." });
        }

        req.user = await User.findById(decoded.id).select("-password");
        if (!req.user) {
            return res.status(401).json({ message: "User not found" });
        }

        next();
    } catch (error) {
        console.error("🚨 Auth Middleware Error:", error);
        res.status(401).json({ message: "Authorization error" });
    }
};

✅ Now, restart your server and check the backend console logs to see the received token.

5️⃣ Ensure the JWT Secret is Correct

In .env file, verify you have the correct secret key:

ini
CopyEdit
JWT_SECRET=mySuperSecretKey

Then, restart your server:

sh
CopyEdit
ctrl + c  # Stop the server
node app.js  # Restart the server

Final Check

• ✅ User is logged in
• ✅ Token is stored in localStorage
• ✅ Token is correctly included in the request headers
• ✅ Token is properly verified on the backend

This should fix the "Invalid Token" issue. 🚀 Let me know if you need more help!

🚨 Fixing the "Invalid Token" (401 Unauthorized) Error

Your issue is that the JWT token is either missing, expired, or not properly sent in the request.

✅ Step-by-Step Fix

1️⃣ Fix the Frontend (community.html / JavaScript)

Make sure the token is properly sent in the request.

🔹 Update your sendFriendRequest function in community.html or your frontend JS file:

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token"); // ✅ Retrieve token from localStorage

    if (!token) {
        console.error("❌ No token found. Please log in.");
        alert("You must be logged in to send friend requests.");
        return;
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}` // ✅ Ensure token is sent correctly
            },
            body: JSON.stringify({ recipientId }),
        });

        const data = await response.json();
        if (!response.ok) {
            throw new Error(`Server Error: ${JSON.stringify(data)}`);
        }

        alert("✅ Friend request sent successfully!");
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert("Failed to send friend request.");
    }
}

🔹 Make sure you are storing the token in localStorage when logging in:

js
CopyEdit
localStorage.setItem("token", userToken); // Save token after login

✅ Now, the request will correctly include the token.

2️⃣ Verify if the Token is Stored Correctly

Open the browser console (F12 → Console tab) and run:

js
CopyEdit
console.log(localStorage.getItem("token"));

• If null or undefined, the user is not logged in or the token is missing.
• If a token appears but the error persists, the token might be expired or invalid.

3️⃣ Debug the Backend (authMiddleware.js)

Modify authMiddleware.js to log received tokens and error details.

🔹 Updated authMiddleware.js

js
CopyEdit
const jwt = require("jsonwebtoken");
const User = require("../models/User");

const protect = async (req, res, next) => {
    try {
        const token = req.headers.authorization?.split(" ")[1];

        console.log("🔍 Received Token:", token); // ✅ Debugging log

        if (!token) {
            return res.status(401).json({ message: "No token, authorization denied" });
        }

        let decoded;
        try {
            decoded = jwt.verify(token, process.env.JWT_SECRET);
            console.log("✅ Token successfully decoded:", decoded);
        } catch (err) {
            console.error("🚨 JWT Verification Error:", err.message);
            return res.status(401).json({ message: "Invalid token." });
        }

        req.user = await User.findById(decoded.id).select("-password");
        if (!req.user) {
            return res.status(401).json({ message: "User not found" });
        }

        next();
    } catch (error) {
        console.error("🚨 Auth Middleware Error:", error);
        res.status(401).json({ message: "Authorization error" });
    }
};

module.exports = { protect };

✅ This will print the received token in the backend logs.

• If the token is undefined or incorrect, the issue is in the frontend.
• If it decodes correctly but still fails, check the user data.

4️⃣ Test API with Postman / cURL

To check if the issue is frontend-related, send a request manually.

🔹 Postman Request:

• URL: http://localhost:5000/api/friends/send-friend-request
• Method: POST
• Headers:
  • Authorization: Bearer YOUR_TOKEN_HERE
  • Content-Type: application/json
• Body (JSON):

  json
  CopyEdit
  {
    "recipientId": "123456789"
  }
  

🔹 cURL Command (replace your_token_here with an actual token):

sh
CopyEdit
curl -X POST http://localhost:5000/api/friends/send-friend-request \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer your_token_here" \
     -d '{"recipientId": "123456789"}'

✅ If this works, the issue is in your frontend.
❌ If it fails, the issue is in your backend token verification.

5️⃣ Ensure JWT Secret is Set Correctly

Go to your .env file and make sure the JWT secret is correct:

ini
CopyEdit
JWT_SECRET=mySuperSecretKey

Then, restart your server:

sh
CopyEdit
ctrl + c  # Stop the server
node app.js  # Restart the server

Final Check ✅

• ✅ User is logged in & token is stored in localStorage
• ✅ Token is correctly sent in Authorization header
• ✅ Backend is receiving and decoding the token
• ✅ Postman request works without issues

🚀 After these fixes, your friend request feature should work without "Invalid Token" errors. Let me know if you need more help!

🚨 Fixing "Invalid Token" (401 Unauthorized) When Sending a Friend Request

Your error means that the JWT token is either missing, incorrect, or expired. Let's debug and fix this issue step by step.

✅ Step 1: Ensure the Frontend Sends the Token Correctly

Your sendFriendRequest function in community.html must correctly send the JWT token.

🔹 Update sendFriendRequest in community.html

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token"); // ✅ Retrieve token from localStorage

    if (!token) {
        console.error("❌ No token found. Please log in.");
        alert("You must be logged in to send friend requests.");
        return;
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}` // ✅ Ensure token is sent correctly
            },
            body: JSON.stringify({ recipientId }),
        });

        const data = await response.json();
        console.log("🔍 Server Response:", data);

        if (!response.ok) {
            throw new Error(`Server Error: ${JSON.stringify(data)}`);
        }

        alert("✅ Friend request sent successfully!");
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert("Failed to send friend request.");
    }
}

✅ Now, the request will correctly include the JWT token.

✅ Step 2: Verify the Token in localStorage

1. Open Developer Console (F12 → Console tab).
2. Run:

   js
   CopyEdit
   console.log(localStorage.getItem("token"));
   

   • If null or undefined, the user is not logged in or the token is missing.
   • If a token appears but the error persists, it might be expired or incorrect.

✅ Step 3: Debug Backend Token Handling

Modify authMiddleware.js to log received tokens and errors.

🔹 Updated authMiddleware.js

js
CopyEdit
const jwt = require("jsonwebtoken");
const User = require("../models/User");

const protect = async (req, res, next) => {
    try {
        const token = req.headers.authorization?.split(" ")[1];

        console.log("🔍 Received Token:", token); // ✅ Debugging log

        if (!token) {
            return res.status(401).json({ message: "No token, authorization denied" });
        }

        let decoded;
        try {
            decoded = jwt.verify(token, process.env.JWT_SECRET);
            console.log("✅ Token successfully decoded:", decoded);
        } catch (err) {
            console.error("🚨 JWT Verification Error:", err.message);
            return res.status(401).json({ message: "Invalid token." });
        }

        req.user = await User.findById(decoded.id).select("-password");
        if (!req.user) {
            return res.status(401).json({ message: "User not found" });
        }

        next();
    } catch (error) {
        console.error("🚨 Auth Middleware Error:", error);
        res.status(401).json({ message: "Authorization error" });
    }
};

module.exports = { protect };

✅ Now, your server will print the received token and any errors.

✅ Step 4: Manually Test with Postman / cURL

Before fixing the frontend, test the API manually to isolate the problem.

🔹 Use Postman

• URL: http://localhost:5000/api/friends/send-friend-request
• Method: POST
• Headers:
  • Authorization: Bearer YOUR_TOKEN_HERE
  • Content-Type: application/json
• Body (JSON):

  json
  CopyEdit
  {
    "recipientId": "123456789"
  }
  

🔹 Use cURL

sh
CopyEdit
curl -X POST http://localhost:5000/api/friends/send-friend-request \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer your_token_here" \
     -d '{"recipientId": "123456789"}'

✅ If this works, the issue is in the frontend.
❌ If it fails, the issue is in the backend token verification.

✅ Step 5: Ensure JWT Secret is Correct

Make sure the .env file contains:

ini
CopyEdit
JWT_SECRET=mySuperSecretKey

Then, restart your server:

sh
CopyEdit
ctrl + c  # Stop the server
node app.js  # Restart the server

✅ Final Check

• 🔍 localStorage.getItem("token") contains a valid token
• 📤 Frontend correctly sends Authorization: Bearer <token>
• 📜 Backend logs the received token
• 🛠️ Postman request works

🚀 After these fixes, your friend request feature should work perfectly. Let me know if you need more help! 😊

Your issue is that the JWT token being sent in the request is either missing, invalid, or expired. Let's go step by step to fix it.

✅ Step 1: Verify the Token in Browser Storage

Before fixing the backend, let's confirm that the frontend is sending a valid token.

1. Open Developer Console (F12) in Chrome.
2. Run the following command to check if the token exists:

   js
   CopyEdit
   console.log(localStorage.getItem("token"));
   

   • If null or undefined, the user is not logged in or the token is not being saved properly.
   • If you see a token but still get the error, the token might be expired or incorrect.

✅ Step 2: Ensure Frontend Sends the Token Correctly

Your sendFriendRequest function should send the correct Authorization header.

🔹 Fix sendFriendRequest in community.html

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token"); // ✅ Retrieve JWT token from localStorage

    if (!token) {
        console.error("❌ No token found. User is not logged in.");
        alert("You must be logged in to send friend requests.");
        return;
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}` // ✅ Send token correctly
            },
            body: JSON.stringify({ recipientId }),
        });

        const data = await response.json();
        console.log("🔍 Server Response:", data);

        if (!response.ok) {
            throw new Error(`Server Error: ${JSON.stringify(data)}`);
        }

        alert("✅ Friend request sent successfully!");
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert("Failed to send friend request.");
    }
}

✅ Now, the request will always include the token.

✅ Step 3: Debug Backend Token Verification

Modify authMiddleware.js to log the received token and debug errors.

🔹 Updated authMiddleware.js

js
CopyEdit
const jwt = require("jsonwebtoken");
const User = require("../models/User");

const protect = async (req, res, next) => {
    try {
        const token = req.headers.authorization?.split(" ")[1];

        console.log("🔍 Received Token:", token); // ✅ Debugging log

        if (!token) {
            return res.status(401).json({ message: "No token, authorization denied" });
        }

        let decoded;
        try {
            decoded = jwt.verify(token, process.env.JWT_SECRET);
            console.log("✅ Token successfully decoded:", decoded);
        } catch (err) {
            console.error("🚨 JWT Verification Error:", err.message);
            return res.status(401).json({ message: "Invalid token." });
        }

        req.user = await User.findById(decoded.id).select("-password");
        if (!req.user) {
            return res.status(401).json({ message: "User not found" });
        }

        next();
    } catch (error) {
        console.error("🚨 Auth Middleware Error:", error);
        res.status(401).json({ message: "Authorization error" });
    }
};

module.exports = { protect };

✅ Now, the server logs every token received and any JWT errors.

✅ Step 4: Manually Test the API with Postman

To check if the backend is working without the frontend, manually test the API.

🔹 Use Postman

• URL: http://localhost:5000/api/friends/send-friend-request
• Method: POST
• Headers:
  • Authorization: Bearer YOUR_TOKEN_HERE
  • Content-Type: application/json
• Body (JSON):

  json
  CopyEdit
  {
    "recipientId": "123456789"
  }
  

🔹 Use cURL

sh
CopyEdit
curl -X POST http://localhost:5000/api/friends/send-friend-request \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer your_token_here" \
     -d '{"recipientId": "123456789"}'

✅ If this works, the issue is in the frontend.
❌ If it fails, the issue is in the backend token verification.

✅ Step 5: Ensure JWT Secret is Set Correctly

Make sure your .env file contains:

ini
CopyEdit
JWT_SECRET=mySuperSecretKey

Then, restart your server:

sh
CopyEdit
ctrl + c  # Stop the server
node app.js  # Restart the server

✅ Now your token verification will work properly.

✅ Final Checks

• 🔍 Run console.log(localStorage.getItem("token")) in the browser
• 📤 Ensure the frontend sends Authorization: Bearer <token>
• 📜 Backend logs the received token
• 🛠️ Postman request works correctly

🚀 After these fixes, your friend request feature should work perfectly! Let me know if you need more help. 😊

Awesome! 🎉 Now, to ensure users can only send a friend request once, we need to check if the request is already pending before adding a new one.

✅ Step 1: Update friendRoutes.js to Prevent Duplicate Requests

Modify the send-friend-request route to prevent sending duplicate friend requests.

🔹 Updated friendRoutes.js

js
CopyEdit
const express = require("express");
const router = express.Router();
const { protect } = require("../middlewares/authMiddleware");
const User = require("../models/User");

// Send a friend request
router.post("/send-friend-request", protect, async (req, res) => {
    try {
        const { recipientId } = req.body;
        const senderId = req.user.id;

        if (!recipientId) {
            return res.status(400).json({ message: "Recipient ID is required." });
        }

        // Ensure recipient exists
        const recipient = await User.findById(recipientId);
        if (!recipient) {
            return res.status(404).json({ message: "User not found." });
        }

        // Check if already friends
        if (recipient.friends.includes(senderId)) {
            return res.status(400).json({ message: "You are already friends with this user." });
        }

        // ✅ Check if the friend request is already sent
        if (recipient.friendRequests.includes(senderId)) {
            return res.status(400).json({ message: "Friend request already sent." });
        }

        // Add friend request
        recipient.friendRequests.push(senderId);
        await recipient.save();

        res.json({ message: "Friend request sent successfully!" });
    } catch (error) {
        console.error("❌ Server Error:", error);
        res.status(500).json({ message: "Internal server error." });
    }
});

module.exports = router;

✅ Now, the backend prevents duplicate friend requests.

✅ Step 2: Update Frontend to Handle Errors

If a user clicks the "Add Friend" button again, the frontend should notify them instead of resending the request.

🔹 Update sendFriendRequest in community.html

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token");

    if (!token) {
        console.error("❌ No token found. User is not logged in.");
        alert("You must be logged in to send friend requests.");
        return;
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}`
            },
            body: JSON.stringify({ recipientId }),
        });

        const data = await response.json();
        console.log("🔍 Server Response:", data);

        if (!response.ok) {
            if (data.message === "Friend request already sent.") {
                alert("You've already sent a friend request to this user.");
            } else if (data.message === "You are already friends with this user.") {
                alert("You are already friends with this user.");
            } else {
                alert("Failed to send friend request.");
            }
            return;
        }

        alert("✅ Friend request sent successfully!");
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert("Failed to send friend request.");
    }
}

✅ Now, the frontend properly handles duplicate friend requests.

🚀 Final Testing Checklist

✅ Try sending a friend request once → Success!
✅ Try sending a friend request again → Error: "Friend request already sent."
✅ Try sending a request to an already accepted friend → Error: "You are already friends with this user."
✅ Frontend alerts the user properly.

This will make your friend request feature smooth and error-free! 🚀🔥 Let me know if you need any tweaks. 😊

To disable the "Add Friend" button after a friend request is sent, we can update the button dynamically. Here's how:

✅ Step 1: Modify the HTML Button

Make sure your "Add Friend" button has an ID or class that corresponds to the user.

html
CopyEdit
<button id="friend-btn-USER_ID" onclick="sendFriendRequest('USER_ID')">Add Friend</button>

Replace "USER_ID" dynamically in your actual code.

✅ Step 2: Modify the sendFriendRequest Function

Now, we update the function to disable the button after sending a request.

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token");

    if (!token) {
        console.error("❌ No token found. User is not logged in.");
        alert("You must be logged in to send friend requests.");
        return;
    }

    const button = document.getElementById(`friend-btn-${recipientId}`);
    if (button) {
        button.disabled = true; // Disable button to prevent multiple clicks
        button.innerText = "Request Sent"; // Change button text
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}`
            },
            body: JSON.stringify({ recipientId }),
        });

        const data = await response.json();
        console.log("🔍 Server Response:", data);

        if (!response.ok) {
            if (data.message === "Friend request already sent.") {
                alert("You've already sent a friend request to this user.");
            } else if (data.message === "You are already friends with this user.") {
                alert("You are already friends with this user.");
            } else {
                alert("Failed to send friend request.");
            }
            button.disabled = false; // Re-enable the button if request failed
            button.innerText = "Add Friend"; // Reset button text
            return;
        }

        alert("✅ Friend request sent successfully!");
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert("Failed to send friend request.");
        button.disabled = false; // Re-enable button if error occurs
        button.innerText = "Add Friend"; // Reset button text
    }
}

✅ Step 3: Ensure Button Remains Disabled After Page Reload

If you want to persist the button state, store the sent requests in localStorage:

🔹 Save Sent Requests

Modify the function to store sent requests:

js
CopyEdit
if (!response.ok) {
    if (data.message === "Friend request already sent.") {
        localStorage.setItem(`friend-request-${recipientId}`, "sent");
    }
}

🔹 Disable Buttons on Page Load

Run this script when the page loads:

js
CopyEdit
window.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("[id^='friend-btn-']").forEach((button) => {
        const recipientId = button.id.split("-")[2]; // Extract user ID
        if (localStorage.getItem(`friend-request-${recipientId}`) === "sent") {
            button.disabled = true;
            button.innerText = "Request Sent";
        }
    });
});

🚀 Final Features

✅ The "Add Friend" button disables after sending a request.
✅ The button text changes to "Request Sent" after clicking.
✅ If the page reloads, the button remains disabled using localStorage.
✅ If the request fails, the button re-enables for retrying.

Now users won’t spam friend requests! 🎉 Let me know if you need more tweaks! 🚀

Here is your fully updated code with the requested features:

• Disables the "Add Friend" button after sending a request.
• Changes button text to "Request Sent".
• Persists button state even after page reload using localStorage.
• Handles errors properly and re-enables the button if needed.

🔹 Step 1: Update Your HTML (community.html)

Ensure the button ID is dynamic and corresponds to each user:

html
CopyEdit
<button id="friend-btn-USER_ID" onclick="sendFriendRequest('USER_ID')">Add Friend</button>

Replace USER_ID dynamically in your template engine or frontend framework.
(For example, in React, Vue, or EJS, replace it with actual user IDs.)

🔹 Step 2: Update Your JavaScript (community.js or inside <script> tag in HTML)

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token");

    if (!token) {
        console.error("❌ No token found. User is not logged in.");
        alert("You must be logged in to send friend requests.");
        return;
    }

    const button = document.getElementById(`friend-btn-${recipientId}`);
    if (button) {
        button.disabled = true; // Disable button to prevent multiple clicks
        button.innerText = "Request Sent"; // Change button text
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}`
            },
            body: JSON.stringify({ recipientId }),
        });

        const data = await response.json();
        console.log("🔍 Server Response:", data);

        if (!response.ok) {
            if (data.message === "Friend request already sent.") {
                alert("You've already sent a friend request to this user.");
                localStorage.setItem(`friend-request-${recipientId}`, "sent"); // Store request status
            } else if (data.message === "You are already friends with this user.") {
                alert("You are already friends with this user.");
            } else {
                alert("Failed to send friend request.");
                button.disabled = false; // Re-enable button if request failed
                button.innerText = "Add Friend"; // Reset button text
            }
            return;
        }

        alert("✅ Friend request sent successfully!");
        localStorage.setItem(`friend-request-${recipientId}`, "sent"); // Store request status
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert("Failed to send friend request.");
        button.disabled = false; // Re-enable button if error occurs
        button.innerText = "Add Friend"; // Reset button text
    }
}

// ✅ Ensure buttons remain disabled after page reload
window.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("[id^='friend-btn-']").forEach((button) => {
        const recipientId = button.id.split("-")[2]; // Extract user ID
        if (localStorage.getItem(`friend-request-${recipientId}`) === "sent") {
            button.disabled = true;
            button.innerText = "Request Sent";
        }
    });
});

🔹 Step 3: Update Your Backend API (friendRoutes.js)

Make sure your backend prevents duplicate requests:

js
CopyEdit
const express = require("express");
const router = express.Router();
const { protect } = require("../middlewares/authMiddleware"); // ✅ Import the middleware
const User = require("../models/User");

// Send Friend Request Route
router.post("/send-friend-request", protect, async (req, res) => {
    try {
        const { recipientId } = req.body;
        const senderId = req.user.id; // ✅ Extracted from auth middleware

        if (!recipientId) {
            return res.status(400).json({ message: "Recipient ID is required." });
        }

        // Ensure recipient exists
        const recipient = await User.findById(recipientId);
        if (!recipient) {
            return res.status(404).json({ message: "User not found." });
        }

        // Prevent duplicate friend requests
        if (recipient.friendRequests.includes(senderId)) {
            return res.status(400).json({ message: "Friend request already sent." });
        }

        // Prevent adding if already friends
        if (recipient.friends.includes(senderId)) {
            return res.status(400).json({ message: "You are already friends with this user." });
        }

        // Add friend request
        recipient.friendRequests.push(senderId);
        await recipient.save();

        res.json({ message: "Friend request sent successfully!" });
    } catch (error) {
        console.error("❌ Server Error:", error);
        res.status(500).json({ message: "Internal server error." });
    }
});

module.exports = router;

🔹 Step 4: Update Your Authentication Middleware (authMiddleware.js)

Ensure tokens are verified correctly:

js
CopyEdit
const jwt = require("jsonwebtoken");
const User = require("../models/User");

const protect = async (req, res, next) => {
    try {
        const token = req.headers.authorization?.split(" ")[1];

        if (!token) {
            return res.status(401).json({ message: "No token, authorization denied" });
        }

        let decoded;
        try {
            decoded = jwt.verify(token, process.env.JWT_SECRET);
        } catch (err) {
            if (err.name === "TokenExpiredError") {
                return res.status(401).json({ message: "Session expired. Please log in again." });
            }
            return res.status(401).json({ message: "Invalid token." });
        }

        req.user = await User.findById(decoded.id).select("-password");
        if (!req.user) {
            return res.status(401).json({ message: "User not found" });
        }

        next();
    } catch (error) {
        console.error("🚨 Auth Middleware Error:", error);
        res.status(401).json({ message: "Authorization error" });
    }
};

module.exports = { protect };

✅ Final Features & Fixes

• Prevents duplicate friend requests. ✅
• Ensures users can't send requests if they are already friends. ✅
• Disables the "Add Friend" button after sending a request. ✅
• Persists button state after page reload using localStorage. ✅
• Handles authentication properly with protect middleware. ✅
• Re-enables the button if the request fails. ✅

🚀 Next Steps

1. Test it in your browser to ensure everything works smoothly.
2. Clear localStorage if you need to reset friend requests:

   js
   CopyEdit
   localStorage.clear();
   

3. Make sure your frontend dynamically inserts correct USER_ID in buttons.
4. Check the network tab in your browser developer tools (F12 > Network) for API responses.

This should be a perfectly working solution for friend requests in your app! 🎉 Let me know if you need any improvements! 🚀

Awesome! Now let's ensure the button remains disabled and shows "Request Sent" even after the page refreshes. ✅

This is already partially handled with localStorage, but I'll refine it further to ensure every friend request persists correctly.

🔹 Updated JavaScript (community.js or inside <script> in HTML)

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token");

    if (!token) {
        console.error("❌ No token found. User is not logged in.");
        alert("You must be logged in to send friend requests.");
        return;
    }

    const button = document.getElementById(`friend-btn-${recipientId}`);
    if (button) {
        button.disabled = true; // Disable button immediately
        button.innerText = "Request Sent"; // Change button text
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}`
            },
            body: JSON.stringify({ recipientId }),
        });

        const data = await response.json();
        console.log("🔍 Server Response:", data);

        if (!response.ok) {
            if (data.message === "Friend request already sent.") {
                alert("You've already sent a friend request to this user.");
            } else if (data.message === "You are already friends with this user.") {
                alert("You are already friends with this user.");
            } else {
                alert("Failed to send friend request.");
                button.disabled = false; // Re-enable button if request fails
                button.innerText = "Add Friend"; // Reset text
                return;
            }
        }

        // ✅ Store request status in localStorage to persist after page refresh
        localStorage.setItem(`friend-request-${recipientId}`, "sent");

        alert("✅ Friend request sent successfully!");
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert("Failed to send friend request.");
        button.disabled = false; // Re-enable button if error occurs
        button.innerText = "Add Friend"; // Reset text
    }
}

// ✅ Keep the button disabled & text updated after page refresh
window.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("[id^='friend-btn-']").forEach((button) => {
        const recipientId = button.id.split("-")[2]; // Extract user ID from button ID
        if (localStorage.getItem(`friend-request-${recipientId}`) === "sent") {
            button.disabled = true;
            button.innerText = "Request Sent";
        }
    });
});

🔹 Updated HTML Example (community.html)

Make sure the button ID includes the user's unique ID:

html
CopyEdit
<button id="friend-btn-USER_ID" onclick="sendFriendRequest('USER_ID')">Add Friend</button>

Replace USER_ID dynamically in your frontend template (e.g., React, Vue, EJS, etc.).

✅ Final Features

• Button remains "Request Sent" even after refresh. ✅
• Friend request status is stored in localStorage. ✅
• Users can't send duplicate requests. ✅
• Proper error handling & button reset if request fails. ✅

This perfectly ensures the request status persists after a page refresh! 🎉 🚀 Let me know if you need anything else! 🚀

Your current implementation is almost perfect! 🎯 Just ensure that:

• USER_ID is dynamically replaced in your frontend (e.g., using a loop in React, EJS, or other template engines).
• LocalStorage properly updates the button state on page reload.

🔹 Fully Updated Code

Here’s the final working version that persists the "Request Sent" button even after a page refresh.

✅ 1. Updated HTML

Make sure your button dynamically gets the user ID in your frontend.

html
CopyEdit
<button id="friend-btn-USER_ID" onclick="sendFriendRequest('USER_ID')">Add Friend</button>

⚠️ Replace USER_ID dynamically! Example:

• In EJS (Node.js) → <button id="friend-btn-<%= user._id %>" onclick="sendFriendRequest('<%= user._id %>')">Add Friend</button>
• In React JSX → <button id={friend-btn-${user.id}} onClick={() => sendFriendRequest(user.id)}>Add Friend</button>

✅ 2. Updated JavaScript (community.js or <script> tag)

This ensures:

• Users can send a request only once.
• The button stays disabled after a refresh.
• If an error occurs, the button resets.

js
CopyEdit
async function sendFriendRequest(recipientId) {
    const token = localStorage.getItem("token");

    if (!token) {
        console.error("❌ No token found. User is not logged in.");
        alert("You must be logged in to send friend requests.");
        return;
    }

    const button = document.getElementById(`friend-btn-${recipientId}`);
    if (button) {
        button.disabled = true; // Disable button immediately
        button.innerText = "Request Sent"; // Change button text
    }

    try {
        const response = await fetch("http://localhost:5000/api/friends/send-friend-request", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}`
            },
            body: JSON.stringify({ recipientId }),
        });

        const data = await response.json();
        console.log("🔍 Server Response:", data);

        if (!response.ok) {
            if (data.message === "Friend request already sent.") {
                alert("You've already sent a friend request to this user.");
            } else if (data.message === "You are already friends with this user.") {
                alert("You are already friends with this user.");
            } else {
                alert("Failed to send friend request.");
                button.disabled = false; // Re-enable button if request fails
                button.innerText = "Add Friend"; // Reset text
                return;
            }
        }

        // ✅ Store request status in localStorage to persist after page refresh
        localStorage.setItem(`friend-request-${recipientId}`, "sent");

        alert("✅ Friend request sent successfully!");
    } catch (error) {
        console.error("❌ Error sending friend request:", error);
        alert("Failed to send friend request.");
        button.disabled = false; // Re-enable button if error occurs
        button.innerText = "Add Friend"; // Reset text
    }
}

// ✅ Keep the button disabled & text updated after page refresh
window.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("[id^='friend-btn-']").forEach((button) => {
        const recipientId = button.id.split("-")[2]; // Extract user ID from button ID
        if (localStorage.getItem(`friend-request-${recipientId}`) === "sent") {
            button.disabled = true;
            button.innerText = "Request Sent";
        }
    });
});